<template>
	<view class="home">
		<view class="header" :style="{background:titleobj.color}">
			<view class="title">
				<view>{{titleobj.name}}</view>
				<view>{{titleobj.title}}</view>
				<view>{{titleobj.title_en}}</view>
			</view>

		</view>
		<view class="content">
			<view class="roof">
				<view class="le_hint">
					<view>晋级结果查询</view>
					<view>Promotion result query</view>
				</view>
				<image src="../../static/image/medal.png"></image>
			</view>
			

			<view class="middle">
				<view>请输入您的手机号</view>
				<input type="text" v-model="phone" placeholder-style="color: rgba(25, 28, 36, 0.35)"
					placeholder="Input yuor mobile numble" />
			</view>
			<view class="base" @click="headleInquire"
				:style="{background:titleobj.color,'boxShadow': '0upx 0upx 4upx 0upx'+ titleobj.color}">查询
			</view>
			<view class="relation" @click="isShow=true">联系客服</view>
		</view>


		<view class="pop-up" v-if="show">
			<view class="box">
				<image class="head" @click="show=false" src="../../static/image/can.png"></image>
				<view class="midd">
					<image src="../../static/image/search.png"></image>
					<view>没有查询到结果</view>
					<view>请确认手机号是否有误</view>
				</view>
				<view class="service" @click="headleService">联系客服</view>
			</view>
		</view>



		<view class="mask" v-if="isShow">
			<view class="modal">
				<!-- 联系客服 -->
				<view class="service" v-if="isShow">
					<image class="cancel" @click="isShow=false" src="@/static/image/clos.png"></image>
					<view class="title">联系客服</view>
					<view class="box">
						<view class="way">
							<view class="item">
								<image src="@/static/image/mailbox.png"></image>
								<view>{{mailbox}} 邮箱</view>
							</view>
							<view class="copy" @click="copyBtn(0)">一键复制</view>
						</view>
						<view class="way">
							<view class="item">
								<image src="@/static/image/wx.png"></image>
								<view>{{wx}} 微信</view>
							</view>
							<view class="copy" @click="copyBtn(1)">一键复制</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				mailbox: '3092015856@qq.com',
				wx: 'kfcxin',
				show: false,
				phone: null,
				titleobj: {},
			}
		},
		onLoad() {
			let params = this.getRequestParams();
			let id = params['id'];
			this.$myRequesy({
				url: 'chaxun/index',
				data: {
					id: parseInt(id)
				}
			}).then(res => {
				if (res.code === 0) {
					this.titleobj = res.data
				}
			})
		},
		methods: {

			//复制
			// #ifdef H5
			copyBtn(state) {
				console.log(state)
				let result
				let textarea = document.createElement("textarea")
				textarea.value = state === 0 ? this.mailbox : this.wx
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, (state === 0 ? this.mailbox.length: this.wx
					.length)) // 设置选定区的开始和结束点
				uni.showToast({ //提示
					title: '已复制'
				})
				result = document.execCommand("copy") //将当前选中区复制到剪贴板
				textarea.remove()
			},
			// #endif


			//校验手机格式
			checkMobile(mobile) {
				return RegExp(/^1[3-9]\d{9}$/).test(mobile);
			},

			//手机号查询
			headleInquire() {
				if (!this.checkMobile(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none'
					})
				} else {
					this.$myRequesy({
						url: 'chaxun/search',
						data: {
							id: this.titleobj.id,
							phone: this.phone
						}
					}).then(res => {
						if (res.code !== 0) return this.show = true
						uni.navigateTo({
							url: '../result/index?id=' + this.titleobj.id + '&phone=' + this.phone
						})
					})

				}
			},
			// 联系客服
			headleService() {
				uni.previewImage({
					current: 1,
					urls: ['../../static/image/service.png']
				})
			},
			// 切割url路径 code 渠道参数
			getRequestParams() {
				let url = location.href;
				let requestParams = {};
				if (url.indexOf('?') !== -1) {
					let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
					let strs = str.split('&'); //将字符串内容以&分隔为一个数组
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				return requestParams;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		.header {
			width: 100%;
			height: 400upx;
			padding: 172upx 0upx 0upx 60upx;
			box-sizing: border-box;

			.title {
				color: rgba(255, 255, 255, 100);
				font-size: 36upx;
				font-weight: 600;

				view:last-child {
					font-weight: 500;
					color: rgba(255, 255, 255, 0.50);
					font-size: 24upx;
					margin-top: 10upx;
				}
			}

		}

		.content {
			background-color: #fff;
			margin-top: -40upx;
			border-radius: 40upx 40upx 0px 0px;
			padding: 70upx 60upx 72upx;

		
			.roof {
				display: flex;
				position: relative;
				margin-bottom: 402upx;

				.le_hint {
					color: rgba(25, 28, 36, 100);
					font-size: 36upx;

					view:last-child {
						color: rgba(25, 28, 36, 0.35);
						font-size: 24upx;
						margin-top: 10upx;
					}
				}

				image {
					position: absolute;
					right: -15rpx;
					top: -97rpx;
					width: 190rpx;
					height: 190rpx;
				}
			}
			.relation {
				text-align: center;
				color: #999;
				margin-top: 30upx;
			}
			

			.middle {
				view {
					color: rgba(25, 28, 36, 100);
					font-size: 26upx;
					margin-bottom: 40upx;
				}

				input {
					color: rgba(25, 28, 36, 100);
					font-size: 32upx;
					padding-bottom: 30upx;
					border-bottom: 2upx solid rgba(25, 28, 36, 0.05);
				}
			}

			.base {
				width: 100%;
				// background-color: $uni-color-orange;
				// box-shadow: 0upx 0upx 4upx 0upx $uni-color-orange;
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				height: 100upx;
				line-height: 100upx;
				border-radius: 100upx;
				text-align: center;
				font-weight: 600;
				margin-top: 44upx;
			}
		}


		.pop-up {
			background-color: rgba(25, 28, 36, 0.75);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.box {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				width: 460upx;
				height: 378upx;
				box-sizing: border-box;
				border-radius: 30upx;
				padding: 30upx 30upx 34upx;

				.head {
					width: 40upx;
					height: 40upx;
					display: inline;
					float: right;
				}

				.midd {
					margin: 40upx 0upx 40upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: rgba(48, 48, 48, 0.50);
					font-size: 26upx;

					image {
						width: 300upx;
						height: 140upx;
					}
				}

				.service {
					text-align: center;
					color: rgba(21, 131, 252, 100);
					font-size: 24upx;
				}
			}
		}


		.modal {
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 650upx;
			background-color: #fff;
			border-radius: 30upx;
			text-align: center;
			box-sizing: border-box;

			// 联系客服
			.service {
				height: 400upx;
				padding: 50upx 0upx 86upx;
				box-sizing: border-box;

				image {
					width: 40upx;
					height: 40upx;
				}

				.title {
					font-weight: 600;
					padding-bottom: 42upx;
					border-bottom: 2upx solid rgba(244, 245, 245, 100);
				}

				.cancel {
					position: absolute;
					top: 24upx;
					right: 22upx;
				}

				.box {
					margin: 58upx 60upx 0upx;

					.way {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 40upx;
						color: rgba(48, 48, 48, 100);
						font-size: 28upx;

						.item {
							display: flex;
							align-items: center;

							image {
								margin-right: 10upx;
							}
						}

						.copy {
							color: rgba(34, 135, 249, 100);
						}
					}
				}
			}
		}


		// 遮罩层
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

	}
</style>
